<template>
  <div class="box">
    <echartCompt class="box-chart" v-model="chartOption" />
  </div>
</template>

<script>
//import titleCompt from "@/components/titleCompt";
export default {
  components: {
    //titleCompt,
  },
  props: {
    jdCond: Object,
  },

  data() {
    return {
      rowData: [],
      charData: {},
      data1 = [{
          name: "新增退税",
          value: 1,
        },
        {
          name: "老政策\n延续退税",
          value: 2,
        },],
      data2=[{
          name: "存量\n留抵",
          value: 5,
        },
        {
          name: "增量\n留抵",
          value: 7,
        },]
    };
  },

  watch: {
    condData() {
      // 监听当条件发生切换时，执行数据查询
      this.init();
    },
  },

  computed: {
    // 当前的地图区域 及 政策类型
    condData() {
      return {
        mapName: this.$store.state.jsjfxyData.mapName,
        swjg_dm: this.$store.state.jsjfxyData.swjg_dm,
        swjg_jc: this.$store.state.jsjfxyData.swjg_jc,
        //zcType: this.$store.state.jsjfxyData.zcType,
        //zcName: this.$store.state.jsjfxyData.zcName,
        ssyf_by: this.$store.state.jsjfxyData.ssyf_by,
        ssyf_sy: this.$store.state.jsjfxyData.ssyf_sy,
        dataType: this.jdCond.dataType,
        br_lj: this.jdCond.br_lj,
        dateEnd: this.jdCond.dateEnd,
        cx: this.jdCond.cx,
      };
    },

    chartOption() {
      let data1 = [];
      let data2 = [];
      data1 = this.charData.data1;
      data2 = this.charData.data2;

      let option = {
        tooltip: {
          show: true,
          //trigger: "axis",
          backgroundColor: "transparent",
          borderWidth: 0,
          formatter: (params) => {
            let name = params.name;
            let percent = params.percent.toFixed(1);
            let str = `<div class="selfToolTips">
                 <h3>${name}</h3>
                  <span class="selfToolTips-value">${percent}%</span>
                </div>`;
            return str;
          },
          //formatter:'{b}:\n{d}%',
          textStyle: {
            fontSize: 22,
            color: "#fff",
          },
        },
        series: [
          {
            type: "pie",
            radius: ["70%", "85%"],
            center: ["50%", "50%"],
            color: ["#00b94d", "#ffbf52"],
            data: data1,
            label: {
              show: true,
              position: "outer",
              alignTo: "none",
              bleedMargin: 3,
              formatter: (params) => {
                let name = params.name;
                name = name.slice(0, 4) + "\n" + name.slice(4);
                let percent = params.percent.toFixed(1);
                return name + "\n" + percent + "%";
              },
              textStyle: {
                fontSize: 22,
                color: "#fff",
              },
            },
            top: 20,
            bottom: 20,
          },
          {
            type: "pie",
            radius: [0, "50%"],
            center: ["50%", "50%"],
            color: ["#008ae9", "#e8421c", "#e8421c"],
            data: data2,
            label: {
              show: true,
              position: "inner",
              labelLine: {
                show: false,
              },
              formatter: (params) => {
                let name = params.name;
                name = name.slice(0, 4) + "\n" + name.slice(4);
                let percent = params.percent.toFixed(1);
                return name + "\n" + percent + "%";
              },
              textStyle: {
                fontSize: 22,
                color: "#fff",
              },
            },
          },
        ],
      };

      return option;
    },
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.getData();
    },

    getData() {
      // 查询图表数据
    //   this.ajax({
    //     sql: this.sql,
    //     sqlTip: "右屏_固定资产投资效应_分企业规模",
    //   }).then((res) => {
    //     this.rowData = res;
    //     this.renderData();
    //   });
    },

    renderData() {
    //   let jeData = [];
    //   let hsData = [];
    //   //let mcData = [];
    //   let data1 = [];
    //   let data2 = [];
    //   //let name = ""; //["新增退税", "延续实施退税", "存量留抵退税", "增量留抵退税"]

    //   try {
    //     this.rowData.forEach((item) => {
    //       jeData.push({
    //         name: item.ZCLX_MC,
    //         value: Number(item.TGSH_JE) / 10000,
    //       });
    //       hsData.push({
    //         name: item.ZCLX_MC,
    //         value: Number(item.TGSH_HS),
    //       });
    //       //mcData.push(item.ZCLX_MC);
    //     });

    //     if (this.jdCond.dataType == "hs") {
    //       for (var i = 0; i < 2; i++) {
    //         data1.push({
    //           name: hsData[i].name,
    //           value: hsData[i].value,
    //         });
    //       }
    //       for (var i = 2; i < 4; i++) {
    //         data2.push({
    //           name: hsData[i].name,
    //           value: hsData[i].value,
    //         });
    //       }
    //     } else if (this.jdCond.dataType == "je") {
    //       for (var i = 0; i < 2; i++) {
    //         data1.push({
    //           name: jeData[i].name,
    //           value: jeData[i].value,
    //         });
    //       }
    //       for (var i = 2; i < 4; i++) {
    //         data2.push({
    //           name: jeData[i].name,
    //           value: jeData[i].value,
    //         });
    //       }
    //     }
    //   } catch (e) {
    //     data1[0] = { name: "新增退税", value: 0 };
    //     data1[1] = { name: "延续实施退税", value: 0 };
    //     data2[0] = { name: "存量留抵退税", value: 0 };
    //     data2[1] = { name: "增量留抵退税", value: 0 };
    //   }

    //   this.charData = {
    //     data1,
    //     data2,
    //   };
    },

    getLastDay() {
      let dt = this.$store.state.sysDate.date;
      dt = new Date(dt.getTime() - 86400_000);

      let y = dt.getFullYear();
      let m = (dt.getMonth() + 101).toString().substring(1);
      let d = (dt.getDate() + 100).toString().substring(1);
      return `${y}${m}${d}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  &-chart {
    height: calc(100%);
    text-align: center;
  }
}
</style>
